import Link from 'next/link';
import Image from 'next/image';

interface NewsDetail {
  id: string;
  title: string;
  content: string;
  imageUrl: string;
  publishDate: string;
  author: string;
  category: {
    id: string;
    name: string;
  };
}

// 模拟新闻详情数据
const mockNewsDetail: NewsDetail = {
  id: '1',
  title: '详细的新闻标题',
  content: `
    这是新闻的详细内容第一段。这是一段较长的文字，用来模拟真实的新闻内容。
    这里包含了新闻的主要信息和细节描述。

    这是新闻的第二段落。在这里可以继续补充更多的新闻细节和相关信息。
    通过多个段落的形式，使新闻内容的展示更加清晰和有条理。

    这是新闻的最后一个段落，用于总结新闻内容或提供额外的补充信息。
  `,
  imageUrl: 'https://picsum.photos/800/400?random=7',
  publishDate: '2024-01-20 14:30',
  author: '张记者',
  category: {
    id: 'tech',
    name: '科技',
  },
};

export default function NewsDetailPage({ params }: { params: { id: string } }) {
  return (
    <div className="container mx-auto px-4 py-8">
      {/* 面包屑导航 */}
      <nav className="flex text-gray-500 text-sm mb-8">
        <Link href="/" className="hover:text-blue-600">
          首页
        </Link>
        <span className="mx-2">/</span>
        <Link href={`/category/${mockNewsDetail.category.id}`} className="hover:text-blue-600">
          {mockNewsDetail.category.name}
        </Link>
        <span className="mx-2">/</span>
        <span className="text-gray-900">正文</span>
      </nav>

      {/* 新闻内容 */}
      <article className="max-w-4xl mx-auto bg-white rounded-lg shadow-md overflow-hidden">
        {/* 新闻标题区 */}
        <div className="p-6">
          <h1 className="text-3xl font-bold mb-4">{mockNewsDetail.title}</h1>
          <div className="flex items-center text-gray-500 text-sm mb-6">
            <span>{mockNewsDetail.author}</span>
            <span className="mx-2">·</span>
            <span>{mockNewsDetail.publishDate}</span>
            <span className="mx-2">·</span>
            <Link href={`/category/${mockNewsDetail.category.id}`} className="text-blue-600 hover:text-blue-800">
              {mockNewsDetail.category.name}
            </Link>
          </div>
        </div>

        {/* 主图 */}
        <div className="relative h-[400px] w-full">
          <Image src={mockNewsDetail.imageUrl} alt={mockNewsDetail.title} fill className="object-cover" />
        </div>

        {/* 新闻正文 */}
        <div className="p-6">
          <div className="prose prose-lg max-w-none">
            {mockNewsDetail.content.split('\n').map(
              (paragraph, index) =>
                paragraph.trim() && (
                  <p key={index} className="mb-4">
                    {paragraph.trim()}
                  </p>
                )
            )}
          </div>
        </div>
      </article>
    </div>
  );
}
